<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>canvas裁剪图片</title>
    <script src="./js/jquery.js"></script>
    <script src="./js/index.js"></script>
</head>

<body>
    <div>
        <input type="file" id="imgFile">
    </div>
    <div style="width: 300px;height: 300px;position: absolute;left: 300px;top: 0;display: inline-block">
        <img id="demoImg" style="height: 300px;width: 300px" alt="">
        <div style="width: 150px;height: 150px;border: 1px solid #4fb8e3;position: absolute;left: 0;top: 0;z-index: 1000" id="chooseBox"></div>
    </div>
    <div style="position: absolute;left: 700px;top: 0">
        <canvas id="myCan" width="150" height="150"></canvas>
        <button id="cut">裁剪图片</button>
        <button id="btn">服务器返回获取裁剪后的文件</button>
        <img id="returnImg" alt="">
    </div>
</body>

</html>
